<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NodeJS Chat Demo </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="lib/common.js" type="text/javascript"></script>
<script src="http://nodejs.t.com:8000/socket.io/socket.io.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
    $("#layout_main").ligerLayout({ leftWidth: 190, height: '100%', heightDiff:-34, space:4, onHeightChanged: f_heightChanged });

	$("#main_frame_center").ligerTab({ height: $("#layout_main .l-layout-center").height() });

	var socket, server;

	if (typeof io != 'undefined') {
		socket = io.connect('http://nodejs.t.com:8000');
		server = {
			listen: function(){
				socket.on('ready', function(data){
					if (data.msg == 'OK') {
						conn = true;
					} else {
						conn = false;
					}
				});

				socket.on('welcome', function(data){
					$.cookie('username', data.name);
					$.cookie('sex', data.sex);
					$.cookie('id', data.id);

					var userDOM = $('#user_' + data.id + '');
					if (userDOM.length > 0) {
						userDOM.prependTo($('#main_frame_right'));
					} else {
						$('#main_frame_right').prepend('<div class="user_list" id="user_' + data.id + '">' + data.name + '</div>');
					}
				});

				socket.on('recive', function(data){
					$('#msg_list').append('<p>&lt;' + data.from + '&gt;<br />&nbsp;&nbsp;' + data.text + '</p>');
					var winH = parseInt($(window).height(), 10);
					var msgH = parseInt($('#main_wrap').height(), 10);
					if (msgH >= winH) {
						$('#msg_list').css({'height': winH-200, 'overflow': 'scroll'});
					}
					$('#msg_list').scrollTop($('#msg_list')[0].scrollHeight);
				});

				socket.on('onlineUserUpdate', function(data){
					var userDOM;
					$.each(data, function(id, data){
						userDOM = $('#user_' + id +'');
						if (!userDOM.length > 0) {
							$('#main_frame_right').prepend('<div class="user_list" id="user_' + data.id + '">' + data.name + '</div>');
						}
					})
				});
			}
		}
	} else {
		$.ligerDialog.waitting('<b style="font-size:18px; padding:5px 5px 0;">:(</b>连接服务器失败');
	}

	var signin = function(){
		var user_name = $("#user-name").val();
		var user_sex = $("#user-set input:radio:checked").val();
		$("#user-name").ligerHideTip();
		if (user_name && user_sex) {
			user_set_dialog.close();
			$("#layout_msg").show().ligerLayout({ bottomHeight: 150 });
			Auto_msgInput_height();

			socket.emit('setname', {name: user_name, sex: user_sex});
		} else {
			$("#user-name").focus().ligerTip({ content: '请填写你的姓名或者昵称.', width: 100 });
		}
	}

	if (socket) {
		server.listen();

		$("#user-name").ligerTextBox().bind('focus', function(){$("#user-name").ligerHideTip();});
		$("#user-set input:radio").ligerRadio();
		$("#user-signin").ligerButton({click: signin, text: '进入我的主页'});

		var user_set_dialog = $.ligerDialog.open({ target: $("#user-set"), title: '个人资料', allowClose: false });

		$("body").keydown(function(event){
			if (event.which == 13) {
				signin(); return false;
			}
		});
	}

});

function f_heightChanged(options){
    if (tab){
    	tab.addHeight(options.diff);
    }
    if (accordion && options.middleHeight - 24 > 0){
    	accordion.setHeight(options.middleHeight - 24);
    }
}

function f_addTab(tabid, text, url){
	tab.addTabItem({ tabid: tabid, text: text, url: url });
}

function Auto_msgInput_height(){
	var layout_bottom = $("#layout_msg .l-layout-bottom");
	var autoH = function(){
		$("#msg_input").height(layout_bottom.height()).focus();
	}
	autoH();
	layout_bottom.resize(autoH);
}
</script>
<style type="text/css"> 
    body,html{height:100%;}
    body{ padding:0px; margin:0; overflow:hidden;}
    .space{ color:#E7E7E7;}
    .l-topmenu{ margin:0; padding:0; height:31px; line-height:31px; background:url('lib/images/top.jpg') repeat-x bottom; position:relative; border-top:1px solid #1D438B;}
    .l-topmenu-logo{ color:#E7E7E7; padding-left:40px; line-height:26px;background:url('lib/images/logo_w.png') no-repeat 10px;}
    .l-topmenu-welcome{ position:absolute; height:24px; line-height:24px; right:30px; top:2px;color:#070A0C;}
    .l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}

    #user-set{display: none; margin: 10px 5px;}
    #user-set th{text-align:right; padding:5px;}

    #layout_msg{display: none;}
    #msg_input{border: none; width: 99.5%; margin: 2px 3px;}

    #main_frame_right .user_list{padding: 2px 5px;}
 </style>
</head>

<body style="padding:0px;background:#EAEEF5;">
	<div id="pageloading"></div>
	<div id="user-set">
		<table>
			<tr>
				<th>姓名/昵称</th>
				<td><input type="text" id="user-name" value="" /></td>
			</tr>
			<tr>
				<th>性别</th>
				<td>
					<input type="radio" value="1" name="user-name" checked="checked" />男
					<input type="radio" value="0" name="user-name" />女
				</td>
			</tr>
			<tr>
				<th></th>
				<td height="35">
					<div id="user-signin"></div>
				</td>
			</tr>
		</table>
	</div>
	<div id="topmenu" class="l-topmenu">
	    <div class="l-topmenu-logo">NodeJS Chat Demo </div>
	    <div class="l-topmenu-welcome">
	        <a href="javascript:;" class="l-link2">服务器版本</a>
	        <span class="space">|</span>
	        <a href="javascript:;" class="l-link2" target="_blank">捐赠</a>
	        <span class="space">|</span>
	         <a href="javascript:;" class="l-link2" target="_blank">论坛</a>
	    </div>
	</div>

	<div id="layout_main" style="width:99.2%; margin:0 auto; margin-top:4px; ">
		<div position="center" id="main_frame_center">
            <div tabid="home" title="我的主页">
                <div id="layout_msg">
                	<div position="center"></div>
                	<div position="bottom" id="msg_frame_bottom">
                		<textarea id="msg_input" class="l-textarea"></textarea>
                	</div>
                </div>
            </div>
		</div>
		<div position="right" title="用户列表" id="main_frame_right"></div>
	</div>

    <div style="height:32px; line-height:32px; text-align:center;">
            Copyright © 2012 MISLOG.COM
    </div>
<div style="display:none"></div>
</body>
</html>
